<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
		<title>生鲜超市-提交订单</title>
		<link rel="stylesheet" href="/css/element.css">
		<link rel="stylesheet" href="/css/reset.css">
		<link rel="stylesheet" href="/css/main.css">
	</head>

	<body>
		<div id="app">
			<div class="header_con">
				<div class="header">
					<div class="welcome fl">欢迎来到生鲜超市!</div>

					<div class="fr">
						<div class="login_info fl" v-if="isLogin">
							欢迎您：<em>{{user.nickname}}</em>
							<span>&emsp;|&emsp;</span>
						</div>

						<div class="login_btn fl" v-if="!isLogin">
							<a href="/login.html">登录</a>
							<span>|</span>
							<a href="/register.html">注册</a>
						</div>

						<div class="user_link fl" v-else>
							<a href="/">首页</a>
							<span>|</span>
							<a href="/html/cart.html">我的购物车</a>
							<span>|</span>
							<a href="/html/user_center.html">用户中心</a>
							<span>|</span>
							<a href="javascript:;" @click="logout">退出登录</a>
						</div>
					</div>
				</div>
			</div>

			<div class="search_bar clearfix">
				<a href="/" class="logo fl">
					<img src="/images/logo.jpg" height="94px" style="margin-top: -15px"/>
				</a>

				<div class="sub_page_name fl">|提交订单</div>

				<div class="search_con fr">
					<input class="input_text fl" placeholder="搜索商品" />
					<input type="button" class="input_btn fr" value="搜索" />
				</div>
			</div>

			<h3 class="common_title">确认收货地址</h3>

			<div class="common_list_con clearfix">
				<dl>
					<dt>寄送到：</dt>

					<dd v-for="rec in recs" >
						<el-radio v-model="order.distId" :label="rec.id">
							{{rec.address}} （{{rec.name}} 收） {{rec.phone}}
						</el-radio>

						<el-divider></el-divider>
					</dd>
				</dl>

				<a href="/html/user_center.html?index=2" class="edit_site">编辑收货地址</a>
			</div>

			<h3 class="common_title">支付方式</h3>

			<div class="common_list_con clearfix">
				<div class="pay_style_con clearfix">
					<el-radio v-model="order.payStyle" label="0">
						<label class="cash">货到付款</label>
					</el-radio>

					<el-radio v-model="order.payStyle" label="1">
						<label class="weixin">微信支付</label>
					</el-radio>

					<el-radio v-model="order.payStyle" label="2">
						<label class="zhifubao"></label>
					</el-radio>

					<el-radio v-model="order.payStyle" label="3">
						<label class="bank">银行卡支付</label>
					</el-radio>
				</div>
			</div>

			<h3 class="common_title">商品列表</h3>

			<div class="common_list_con clearfix">
				<ul class="goods_list_th clearfix">
					<li class="col01">商品名称</li>
					<li class="col02">商品单位</li>
					<li class="col03">商品价格</li>
					<li class="col04">数量</li>
					<li class="col05">小计</li>
				</ul>

				<ul class="goods_list_td clearfix" v-for="(cart, i) in carts">
					<li class="col01">{{ i + 1 }}</li>
					<li class="col02">
						<img :src="cart.product.imgUrl" />
					</li>
					<li class="col03">{{ cart.product.name }}</li>
					<li class="col04">{{ cart.product.unit }}</li>
					<li class="col05">{{ cart.product.price }}元</li>
					<li class="col06">{{ cart.quantity }}</li>
					<li class="col07">{{ cart.money }}元</li>
				</ul>
			</div>

			<h3 class="common_title">总金额结算</h3>

			<div class="common_list_con clearfix">
				<div class="settle_con">
					<div class="total_goods_count">
						共<em>{{count}}</em>件商品，总金额<b>{{total}}元</b>
					</div>

					<div class="transit">运费：<b>{{freight}}元</b></div>
					<div class="total_pay">实付款：<b>{{total + freight}}元</b></div>
				</div>
			</div>

			<div class="order_submit clearfix">
				<a href="javascript:;" id="order_btn" @click="submit">提交订单</a>
			</div>
		</div>

		<div class="popup_con">
			<div class="popup">
				<p>订单提交成功！</p>
			</div>
			<div class="mask"></div>
		</div>

		<script src="/js/jquery.min.js"></script>
		<script src="/js/vue.js"></script>
		<script src="/js/element.js"></script>
		<script src="/js/axios.min.js"></script>
		<script src="/js/place_order.js"></script>
	</body>
</html>
